<template>
	<view class="container">
		<image :src="'/static/images/my/banner_coupon.png'" mode="widthFix" class="tui-coupon-banner"></image>
		<view class="tui-coupon-list">


			<view class="tui-coupon-item tui-top20">
				<image :src="'/static/images/my/bg_coupon_3x.png'" class="tui-coupon-bg" mode="widthFix"></image>
				
				<view class="tui-coupon-item-left">
					<view class="tui-coupon-price-box">
						<view class="tui-coupon-price-sign">￥</view>
						<view class="tui-coupon-price">{{account.fhbmoney}}</view>
						<view class="tui-coupon-price-sign"></view>
					</view>
					<view class="tui-coupon-price-box">
						<view class="tui-coupon-intro">已结算创客宝</view>
						
					</view>
					
				</view>
				<view class="tui-coupon-item-left">
					<view class="tui-coupon-price-box tui-color-grey" >
						<view class="tui-coupon-price-sign">￥</view>
						<view class="tui-coupon-price" >{{account.freeze_fhbmoney}}</view>
						<view class="tui-coupon-price-sign"></view>
					</view>
					<view class="tui-coupon-intro">待结算创客宝</view>
				
					
				</view>

				
			</view>

		</view>
		<view class="coupon-list">
			<tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19"
			 @change="change" itemWidth="50%"></tui-tabs>
			<view class="tui-coupon">
				<view class="coupon-items tui-top20" v-for="(item,index) in accoutList" :key="index">
					  <view class="coupon-items-left">
					  	<view class="coupon-top">
					  		<view class="coupon-top-title">{{item.type_name}}</view>
					  		<view class="coupon-top-time">{{item.create_time}}</view>
					  	</view>
					  	<view class="coupon-con">
					  		{{item.text}}
					  	</view>
					  	
					  </view>
					  <view class="coupon-items-right">
						  <view class="coupon-nums" :class="{'coupon-red':item.number>0}">
							  {{item.number}}
						  </view>
						  <view class="coupon-nums-sp">结算收益</view>
					  </view>
				</view>
			
			</view>
			<!--加载loadding-->
			
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f5f5f5"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					name: "已结算"
				}, {
					name: "未结算"
				}],
				currentTab: 0,
				pageIndex:1,
				loadding: false,
				pullUpOn: true,
				accoutList:'',
				scrollTop:0,
				account:"",
				bill_types:1,
			}
		},
		onShow() {
			this.tui.haslogin();
			if(this.tui.isLogin()){
				this.init();
			}
		},
		methods: {
			change(e) {
				this.currentTab = e.index;
				this.pageIndex=1;
				this.bill_types=e.index+1;
				this.inits();
			},
			init() {
				    let token = this.tui.getToken();
			        let account=this.tui.request('user','post',{token: token},1000,1,'','userAccountInfo');
			        Promise.resolve(account).then((value)=>{
			           if(value.code==10000){
			           	this.account=value.data;
						
			           }else{
			           	this.tui.toast(value.message);
			           }
			        })
					this.inits();
					
			},
			inits(){
				let token = this.tui.getToken();
				let datas={
					token: token,
					bill_type:6,
					limit:20,
					page:this.pageIndex,
					bill_types:this.bill_types,
				};
				let accoutList=this.tui.request('user','post',datas,1000,1,'','bill');
				Promise.resolve(accoutList).then((value)=>{
				   if(value.code==10000){
					    this.accoutList=value.data.data;
				   }else{
				   	this.tui.toast(value.message);
				   }
				})
			},
		},
		
		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {
			//只是测试效果，逻辑以实际数据为准
			if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tui-tabs-fixed{
		position:relative;
		top:40rpx !important;
	}
	.tui-coupon{
		width: 100%;
		margin-top: 60rpx;
		position: relative;
		box-sizing: border-box;
	}
	.coupon-top{
		color:#666;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.coupon-top-title{
		text-align: left;padding-right: 20rpx;
		font-size: 26rpx;
	}
	.coupon-top-time{
		color:#b3b1b1;
		font-size: 16rpx;
	}
	.coupon-list {
	
		/* margin: 0 25rpx; */
		position: relative;
		box-sizing: border-box;
		
	}
	.tui-coupon-list {
		width: 100%;
		padding: 0 25rpx;
		position: relative;
		box-sizing: border-box;
		
	}
	
	.tui-coupon-banner {
		width: 100%;
	}
	.coupon-con{
		background:#fff;
	}
	.coupon-nums{
		color:#828080;
		font-size: 30rpx;
	}
	.coupon-red{
		color:#e41f19
	}
	.coupon-grey{
		color:#acacac
	}
	.coupon-nums-sp{
		font-size: 24rpx;color:#b3b1b1;
		line-height: 40rpx;
	}
	.tui-coupon-item {
		border-radius: 6rpx;
		width: 100%;
	
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background:#fff;
		overflow: hidden;
	}
	.coupon-items {
		border-radius: 10rpx;
		padding: 20rpx;
		width: 100%;
	
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background:#fff;
		overflow: hidden;
	}
	 .coupon-floar{
		 position: absolute;
		 right:0;
		 top:10rpx;
	 }
	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	
	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}
	.coupon-items-left {
		color:#666;
		width: 70%;
		position: relative;
		z-index: 2;
		padding-left: 20rpx;
		display: flex;
	
		justify-content: flex-end;
		flex-direction: column;
		flex-shrink: 0;
	}
	.tui-coupon-item-left {
		width: 50%;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}
	
	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}
	
	.tui-coupon-price-sign {
		font-size: 30rpx;
	}
	
	.tui-coupon-price {
		font-size: 50rpx;
		line-height: 50rpx;
		font-weight: bold;
	}
	
	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}
	
	
	.tui-coupon-intro {
		background: #F7F7F7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}
	.coupon-items-right {
		flex: 1;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
	}
	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.coupon-content {
		width: 82%;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		justify-content: center;
	}
	
	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}
	
	.tui-coupon-btn {
		padding: 6rpx;
		background: #FFEBEB;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}
	
	.tui-color-grey {
		color: #888 !important;
	}
	
	.tui-bg-grey {
		background: #F0F0F0 !important;
		color: #888 !important;
	}
	
	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-coupon-rule {
		padding-top: 52rpx;
	}
	
	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}
	
	.tui-padding-btm {
		padding-bottom: 6rpx;
	}
	
	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}
	
	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}
	
	.tui-top20 {
		margin-top: 20rpx;
	}
	
	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}
	
	
	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}
	
	.tui-btn-box {
		position: absolute;
		width: 146rpx;
		height: 52rpx;
		right: 20rpx;
		bottom: 40rpx;
		z-index: 10;
	}
	
	/* #ifdef APP-PLUS || MP */
	.wx-radio-input {
		margin-right: 0 !important;
	}
	
	/* #endif */
	
	/* #ifdef H5 */
	>>>uni-radio .uni-radio-input {
		margin-right: 0 !important;
	}
	/* #endif */
</style>
